<template>
	<view v-if="loadingPage">
		<u-loading-page :loading="true"></u-loading-page>
	</view>
	<view class="container con_auto" v-else>
		<block v-if="listData.length > 0">
			<block v-for="(item, index) in listData" :key="index">
				<view class="coupon" @tap.stop="$navTo('/pages/work/send_coupon/send_coupon?id=' + item.id + '&name=' + item.name)">
					<view class="coupon_left">
						<view class="title">{{ item.name }}</view>
					</view>
					<view class="coupon_right">
						<view class="price">
							{{ item.value }}
							<text>元</text>
						</view>
					</view>
					<view class="coupon_btn">赠</view>
				</view>
			</block>
		</block>
		<block v-else>
			<view class="all_empty">
				<u-empty mode="data" text="优惠券列表为空"></u-empty>
			</view>
		</block>
		<u-loadmore v-if="listData.length > searchForm.limit" :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			searchForm: {
				limit: 10,
				page: 1
			},
			listData: [],
			status: 'loadmore',
			loadingText: '努力加载中',
			loadmoreText: '轻轻上拉',
			nomoreText: '实在没有了'
		};
	},
	onLoad() {
		this.$initConfig().then((_) => {
			this.getInfo();
		});
	},
	onReachBottom() {
		if (this.status != 'nomore') {
			this.searchForm.page++;
			this.getInfo(true);
		}
	},
	methods: {
		getInfo(is_add = false) {
			let _this = this;
			this.status = 'loading';
			_this
				.$http('coupon/getCouponByList', {
					...this.searchForm
				})
				.then((res) => {
					if (res.code) {
						_this.loadingPage = false
						if (is_add) {
							_this.listData = _this.listData.concat(res.data.data);
						} else {
							_this.listData = res.data.data;
						}
						if (_this.listData.length >= res.data.total) {
							this.status = 'nomore';
						} else {
							this.status = 'loadmore';
						}
					}
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.coupon {
	background: url('/static/coupon.png');
	background-size: 100% 100%;
	height: 200rpx;
	display: flex;
	align-items: center;
	border-radius: 24rpx;
	overflow: hidden;
	margin-top: 24rpx;
	position: relative;
	&_left {
		width: 50%;
		.title {
			text-align: center;
			font-size: 60rpx;
			color: #fff;
		}
	}
	&_right {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-right: 24rpx;
		.price {
			font-size: 60rpx;
			font-weight: bold;
			color: #f1291d;
			text {
				font-size: 29rpx;
				margin-left: 4rpx;
				font-weight: unset;
			}
		}
	}
	&_btn {
		position: absolute;
		right: 0;
		width: 70rpx;
		height: 70rpx;
		background: linear-gradient(135deg, #f6d365, #fda085);
		text-align: center;
		line-height: 70rpx;
		border-radius: 100%;
		color: #f1291d;
	}
}
</style>
